<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="head-container">
      <crud-operation :permission="permission" />
    </div>
    <!-- 表单渲染 -->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="600px" top="10px" @close="changeAllStatus">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
        <el-form-item label="组件名称" prop="componentName">
          <el-input v-model="form.componentName" style="width: 200px;" readonly />
        </el-form-item>
        <el-form-item label="真实表名" prop="relTableName">
          <el-input v-model="form.relTableName" style="width: 200px;" readonly />
        </el-form-item>
        <el-form-item label="表字段名" prop="colName">
          <el-input v-model="form.colName" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="表字段中文名" prop="colCname">
          <el-input v-model="form.colCname" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="字段类型" prop="colType">
          <el-input v-model="form.colType" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="字段长度" prop="colLength">
          <el-input v-model="form.colLength" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="字段精度" prop="colPrecision">
          <el-input v-model="form.colPrecision" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="字段配置" prop="colConf">
          <el-input v-model="form.colConf" placeholder="" style="width: 200px;" />
          <el-tooltip class="item" effect="dark" content="若字段类型为timestamp, 该值为 yyyy-MM-dd hh24:mi:ss; 若字段类型为date, 该值为 yyyy-MM-dd" placement="right">
            <i class="el-icon-info" />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="是否主键" prop="isKey">
          <el-select v-model="form.isKey" placeholder="请选择">
            <el-option label="是" value="1" />
            <el-option label="否" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否可空" prop="isNull">
          <el-select v-model="form.isNull" placeholder="请选择">
            <el-option label="可空" value="1" />
            <el-option label="不可空" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序类型" prop="seqType">
          <el-select v-model="form.seqType" placeholder="请选择" clearable>
            <el-option label="升序" value="asc" />
            <el-option label="降序" value="desc" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否查询条件" prop="qqIsQuery">
          <el-select v-model="form.qqIsQuery" placeholder="请选择" @change="changeQueryStatus(form.qqIsQuery)">
            <el-option label="是" value="1" />
            <el-option label="否" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="queryStatus || form.qqIsQuery === '1'" label="查询条件类型" prop="qqQueryType">
          <el-select v-model="form.qqQueryType" placeholder="请选择" clearable @change="checkQueryType(form.qqQueryType)">
            <el-option
              v-for="item in dict.QUERY_ELEMENT_TYPE"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="queryStatus || form.qqIsQuery === '1'" label="查询条件配置" prop="qqQueryTypeConf">
          <!--    文本输入框      -->
          <el-select v-if="queryType === 'INPUT' || form.qqQueryType === 'INPUT'" v-model="form.qqQueryTypeConf" style="width: 200px" clearable>
            <el-option
              v-for="queryOperator in dict.QUERY_OPERATOR"
              :key="queryOperator.id"
              :label="queryOperator.label"
              :value="queryOperator.value"
            />
          </el-select>
          <!--    码值字符串      -->
          <el-input v-else-if="queryType === 'SELECT_STRING' || form.qqQueryType === 'SELECT_STRING'" v-model="form.qqQueryTypeConf" style="width: 200px" clearable />
          <!--    数据字典      -->
          <el-select v-else-if="queryType === 'SELECT_DICT' || form.qqQueryType === 'SELECT_DICT'" v-model="form.qqQueryTypeConf" style="width: 200px" clearable>
            <el-option
              v-for="queryTypeConf in dictionaries"
              :key="queryTypeConf.id"
              :label="queryTypeConf.remark"
              :value="queryTypeConf.name"
            />
          </el-select>
          <!--   自定义SQL      -->
          <el-input v-else-if="queryType === 'SELECT_SQL' || form.qqQueryType === 'SELECT_SQL'" v-model="form.qqQueryTypeConf" style="width: 200px" clearable />
          <!--   日期      -->
          <el-input v-else-if="queryType === 'DATE' || form.qqQueryType === 'DATE'" v-model="form.qqQueryTypeConf" style="width: 200px" clearable />
          <!--   日期范围      -->
          <el-input v-else-if="queryType === 'DATE_BETWEEN' || form.qqQueryType === 'DATE_BETWEEN'" v-model="form.qqQueryTypeConf" style="width: 200px" clearable />
          <el-input v-else hidden />
        </el-form-item>
        <el-form-item label="查询限制类型" prop="qqLimitType">
          <el-select v-model="form.qqLimitType" placeholder="请选择" clearable @change="changeQueryLimit(form.qqLimitType)">
            <el-option
              v-for="item in dict.QUERY_LIMIT_TYPE"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="queryLimitStatus || form.qqLimitType !== null" label="查询限制类型" prop="qqLimitTypeConf">
          <!--   变量    -->
          <el-select v-if="queryLimitStatus === 'VARIABLE' || form.qqLimitType === 'VARIABLE'" v-model="form.qqLimitTypeConf" style="width: 200px" clearable>
            <el-option
              v-for="item in dict.SYS_VARIABLE"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!--   系统参数   -->
          <el-select v-else-if="queryLimitStatus === 'SYS_PARAMS' || form.qqLimitType === 'SYS_PARAMS'" v-model="form.qqLimitTypeConf" style="width: 200px" clearable>
            <el-option
              v-for="item in dict.SYS_PARAMS"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input v-else v-model="form.qqLimitTypeConf" style="width: 200px" clearable />
        </el-form-item>
        <el-form-item label="是否展示" prop="ssIsShow">
          <el-select v-model="form.ssIsShow" placeholder="请选择" @change="changeShowStatus(form.ssIsShow)">
            <el-option
              v-for="item in dict.SHOW_TYPE"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="showStatus || form.ssIsShow !== 'N'" label="展示顺序" prop="ssSeq">
          <el-input v-model="form.ssSeq" style="width: 200px;" />
        </el-form-item>
        <!--        <el-form-item v-if="showStatus || form.ssIsShow !== 'N'" label="码值转换类型" prop="ssChangeType">-->
        <!--          <el-select v-model="form.ssChangeType" placeholder="请选择" clearable @change="changeTypeStatus(form.ssChangeType)">-->
        <!--            <el-option-->
        <!--              v-for="item in dict.SHOW_KEY_VALUE_CHANGE"-->
        <!--              :key="item.id"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item v-if="(showStatus || form.ssIsShow !== 'N') && form.ssChangeType !== ''" label="码值转换配置" prop="ssChangeTypeConf">-->
        <!--          <el-input v-model="form.ssChangeTypeConf" clearable style="width: 200px;" />-->
        <!--        </el-form-item>-->
        <el-form-item label="是否可修改" prop="uuCanUpdate">
          <el-select v-model="form.uuCanUpdate" placeholder="请选择" @change="changeUpdateStatus(form.uuCanUpdate)">
            <el-option
              v-for="item in dict.CAN_UPDATE_STATUS"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="updateStatus || form.uuCanUpdate !== 'N'" label="修改控件类型" prop="uuUpdateType">
          <el-select v-model="form.uuUpdateType" placeholder="请选择" clearable @change="changeUpdateType(form.uuUpdateType)">
            <el-option
              v-for="item in dict.UPDATE_ELEMENT_TYPE"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="updateStatus || form.uuCanUpdate !== 'N'" label="修改控件配置" prop="uuUpdateTypeConf">
          <!--     数据字典     -->
          <el-select v-if="updateType === 'SELECT_DICT' || form.uuUpdateType === 'SELECT_DICT'" v-model="form.uuUpdateTypeConf" style="width: 200px" clearable>
            <el-option
              v-for="item in dictionaries"
              :key="item.id"
              :label="item.remark"
              :value="item.name"
            />
          </el-select>
          <!--     文本输入框     -->
          <el-input v-else-if="updateType === 'INPUT' || form.uuUpdateType === 'INPUT'" v-model="form.uuUpdateTypeConf" style="width: 200px" hidden />
          <el-input v-else v-model="form.uuUpdateTypeConf" style="width: 200px" clearable />
        </el-form-item>
        <el-form-item v-if="updateStatus || form.uuCanUpdate !== 'N'" label="修改内容校验类型" prop="uuVerifyType">
          <el-select v-model="form.uuVerifyType" placeholder="请选择" clearable @change="changeVerifyType(form.uuVerifyType)">
            <el-option
              v-for="item in dict.UPDATE_VERIFY_TYPE"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="updateStatus || form.uuCanUpdate !== 'N'" label="内容校验配置" prop="uuVerifyTypeConf">
          <!--     变量     -->
          <el-select v-if="verifyType === 'VARIABLE' || form.uuVerifyType === 'VARIABLE'" v-model="form.uuVerifyTypeConf" style="width: 200px" clearable>
            <el-option
              v-for="item in dict.SYS_VARIABLE"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!--     系统参数     -->
          <el-select v-else-if="verifyType === 'SYS_PARAMS' || form.uuVerifyType === 'SYS_PARAMS'" v-model="form.uuVerifyTypeConf" style="width: 200px" clearable>
            <el-option
              v-for="item in dict.SYS_PARAMS"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!--     通用主键     -->
          <el-select v-else-if="verifyType === 'GENERAL_KEY' || form.uuVerifyType === 'GENERAL_KEY'" v-model="form.uuVerifyTypeConf" style="width: 200px" clearable>
            <el-option
              v-for="item in dict.GENERAL_KEY"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input v-else v-model="form.uuVerifyTypeConf" style="width: 200px" clearable />
        </el-form-item>
        <el-form-item label="修改限制类型" prop="uuLimitType">
          <el-select v-model="form.uuLimitType" placeholder="请选择" clearable @change="changeUuLimitType(form.uuLimitType)">
            <el-option
              v-for="item in dict.UPDATE_LIMIT_TYPE"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="uuLimitTypeStatus || form.uuLimitType !== null" label="修改限制配置" prop="uuLimitTypeConf">
          <!--     变量     -->
          <el-select v-if="limitType === 'VARIABLE' || form.uuLimitType === 'VARIABLE'" v-model="form.uuLimitTypeConf" style="width: 200px" clearable>
            <el-option
              v-for="item in dict.SYS_VARIABLE"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!--     系统参数     -->
          <el-select v-else-if="limitType === 'SYS_PARAMS' || form.uuLimitType === 'SYS_PARAMS'" v-model="form.uuLimitTypeConf" style="width: 200px" clearable>
            <el-option
              v-for="item in dict.SYS_PARAMS"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input v-else v-model="form.uuLimitTypeConf" style="width: 200px" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column v-if="columns.visible('colName')" :show-overflow-tooltip="true" prop="colName" label="表字段名" />
      <el-table-column v-if="columns.visible('colCname')" :show-overflow-tooltip="true" prop="colCname" label="表字段中文名" />
      <el-table-column v-if="columns.visible('colType')" :show-overflow-tooltip="true" prop="colType" label="字段类型" />
      <el-table-column v-if="columns.visible('colLength')" :show-overflow-tooltip="true" prop="colLength" label="字段长度" />
      <el-table-column v-if="columns.visible('colPrecision')" :show-overflow-tooltip="true" prop="colPrecision" label="字段精度" />
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="表字段名:">
              <span>{{ scope.row.colName }}</span>
            </el-form-item>
            <el-form-item label="字段配置:">
              <span>{{ scope.row.colConf }}</span>
            </el-form-item>
            <el-form-item label="是否主键:">
              <span>{{ scope.row.isKey === '1' ? '是' : '否' }}</span>
            </el-form-item>
            <el-form-item label="是否可空:">
              <span>{{ scope.row.isNull === '1' ? '是' : '否' }}</span>
            </el-form-item>
            <el-form-item label="排序类型:">
              <span v-if="scope.row.seqType === 'asc'">升序</span>
              <span v-else-if="scope.row.seqType === 'desc'">降序</span>
              <span v-else-if="scope.row.seqType !== 'desc' && scope.row.seqType !== 'asc'">{{ scope.row.seqType }}</span>
            </el-form-item>
            <el-form-item label="是否查询条件:">
              <span>{{ scope.row.qqIsQuery === '1' ? '是' : '否' }}</span>
            </el-form-item>
            <el-form-item label="查询条件类型:">
              <span>{{ scope.row.qqQueryType }}</span>
            </el-form-item>
            <el-form-item label="查询条件配置:">
              <span>{{ scope.row.qqQueryTypeConf }}</span>
            </el-form-item>
            <el-form-item label="查询限制类型:">
              <template v-for="item in dict.QUERY_LIMIT_TYPE">
                <span
                  v-if="scope.row.qqLimitType === item.value"
                  :key="item.id"
                >{{ item.label }}</span>
              </template>
            </el-form-item>
            <el-form-item label="查询限制配置:">
              <span>{{ scope.row.qqLimitTypeConf }}</span>
            </el-form-item>
            <el-form-item label="是否展示:">
              <template v-for="item in dict.SHOW_TYPE">
                <span
                  v-if="scope.row.ssIsShow === item.value"
                  :key="item.id"
                >{{ item.label }}</span>
              </template>
            </el-form-item>
            <el-form-item label="展示顺序:">
              <span>{{ scope.row.ssSeq }}</span>
            </el-form-item>
            <el-form-item label="码值转换类型:">
              <template v-for="item in dict.SHOW_KEY_VALUE_CHANGE">
                <span
                  v-if="scope.row.ssChangeType === item.value"
                  :key="item.id"
                >{{ item.label }}</span>
              </template>
            </el-form-item>
            <el-form-item label="码值转换配置:">
              <span>{{ scope.row.ssChangeTypeConf }}</span>
            </el-form-item>
            <el-form-item label="是否可修改:">
              <template v-for="item in dict.CAN_UPDATE_STATUS">
                <span
                  v-if="scope.row.uuCanUpdate === item.value"
                  :key="item.id"
                >{{ item.label }}</span>
              </template>
            </el-form-item>
            <el-form-item label="修改控件类型:">
              <template v-for="item in dict.UPDATE_ELEMENT_TYPE">
                <span
                  v-if="scope.row.uuUpdateType === item.value"
                  :key="item.id"
                >{{ item.label }}</span>
              </template>
            </el-form-item>
            <el-form-item label="修改控件配置:">
              <span>{{ scope.row.uuUpdateTypeConf }}</span>
            </el-form-item>
            <el-form-item label="修改内容校验类型:">
              <span>{{ scope.row.uuVerifyType }}</span>
            </el-form-item>
            <el-form-item label="修改限制类型:">
              <template v-for="item in dict.UPDATE_LIMIT_TYPE">
                <span
                  v-if="scope.row.uuLimitType === item.value"
                  :key="item.id"
                >{{ item.label }}</span>
              </template>
            </el-form-item>
            <el-form-item label="修改限制配置:">
              <span>{{ scope.row.uuLimitTypeConf }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
    <pagination />
  </div>
</template>

<script>
import crudSysSrcConfig from '@/api/postRecord/sysSrcConfig'
import crudOperation from '@crud/CRUD.operation'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import { getDicts } from '@/api/system/dict'

const defaultCrud = CRUD({ title: '源表字段配置', url: 'api/sysSrcConfig', sort: ['ssSeq,asc'], crudMethod: { ...crudSysSrcConfig }})
const defaultForm = {
  id: null,
  componentName: null,
  relTableName: null,
  colName: null,
  colCname: null,
  colType: null,
  colLength: null,
  colPrecision: null,
  colConf: null,
  isKey: null,
  isNull: null,
  seqType: null,
  qqIsQuery: null,
  qqQueryType: null,
  qqQueryTypeConf: null,
  qqLimitType: null,
  qqLimitTypeConf: null,
  ssIsShow: null,
  ssSeq: null,
  ssChangeType: null,
  ssChangeTypeConf: null,
  uuCanUpdate: null,
  uuUpdateType: null,
  uuUpdateTypeConf: null,
  uuVerifyType: null,
  uuVerifyTypeConf: null,
  uuLimitType: null,
  uuLimitTypeConf: null
}
export default {
  name: 'SysSrcConfig',
  components: {
    crudOperation,
    pagination
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  // 加载数据字典
  dicts: [
    'QUERY_ELEMENT_TYPE',
    'QUERY_OPERATOR',
    'QUERY_LIMIT_TYPE',
    'SHOW_TYPE',
    'SHOW_KEY_VALUE_CHANGE',
    'CAN_UPDATE_STATUS',
    'UPDATE_ELEMENT_TYPE',
    'UPDATE_VERIFY_TYPE',
    'UPDATE_LIMIT_TYPE',
    'SYS_VARIABLE',
    'SYS_PARAMS',
    'GENERAL_KEY'
  ],
  data() {
    return {
      permission: {
        add: ['admin', 'sysSrcTable:add'],
        edit: ['admin', 'sysSrcTable:edit'],
        del: ['admin', 'sysSrcTable:del']
      },
      rules: {
        colName: [
          { required: true, message: '该选项不可空', trigger: 'blur' }
        ],
        isKey: [
          { required: true, message: '该选项不可空', trigger: 'blur' }
        ],
        isNull: [
          { required: true, message: '该选项不可空', trigger: 'blur' }
        ],
        qqIsQuery: [
          { required: true, message: '该选项不可空', trigger: 'blur' }
        ],
        ssIsShow: [
          { required: true, message: '该选项不可空', trigger: 'blur' }
        ],
        ssSeq: [
          { required: true, message: '该选项不可空', trigger: 'blur' }
        ],
        uuCanUpdate: [
          { required: true, message: '该选项不可空', trigger: 'blur' }
        ]
      },
      dictionaries: [],
      queryStatus: false,
      queryType: '',
      queryLimitType: '',
      queryLimitStatus: false,
      showStatus: false,
      typeStatus: false,
      updateStatus: false,
      updateType: '',
      verifyType: '',
      updateTypeStatus: false,
      limitType: '',
      uuLimitTypeStatus: false
    }
  },
  beforeCreate() {
    defaultCrud.params.componentName = this.$route.params.componentName
    defaultCrud.params.relTableName = this.$route.params.relTableName
    defaultForm.componentName = this.$route.params.componentName
    defaultForm.relTableName = this.$route.params.relTableName
  },
  created() {
    // console.log(this.crud.props)
    getDicts().then(res => {
      this.dictionaries = res
    })
  },
  methods: {
    // dialog 关闭时，重置所有状态
    changeAllStatus() {
      this.queryStatus = false
      this.queryLimitStatus = false
      this.showStatus = false
      this.typeStatus = false
      this.updateStatus = false
      this.updateTypeStatus = false
      this.uuLimitTypeStatus = false
      this.queryType = null
      this.queryLimitType = null
      this.updateType = null
      this.verifyType = null
      this.limitType = null
    },
    // 判断是否查询，用于加载对应查询配置信息
    changeQueryStatus(data) {
      this.queryStatus = data === '1'
    },
    checkQueryType(data) {
      this.queryType = data
    },
    // 判断配置类型,根据判断类型加载限制配置
    changeQueryLimit(data) {
      this.queryLimitStatus = data !== ''
      this.queryLimitType = data
    },
    // 判断是否展示,用于加载对应展示配置信息
    changeShowStatus(data) {
      this.showStatus = data !== 'N'
    },
    // 判断码值转换类型, 加载对应配置信息项
    changeTypeStatus(data) {
      this.typeStatus = data !== ''
    },
    // 判断是否可修改, 加载对应配置信息项
    changeUpdateStatus(data) {
      this.updateStatus = data !== 'N'
    },
    // 判断修改控件类型, 加载对应配置信息项
    changeUpdateType(data) {
      this.updateTypeStatus = data !== ''
      this.updateType = data
    },
    changeVerifyType(data) {
      this.verifyType = data
    },
    // 判断修改控件类型, 加载对应配置信息项
    changeUuLimitType(data) {
      this.uuLimitTypeStatus = data !== ''
      this.limitType = data
    }
  }
}
</script>

<style>
  .table-expand {
    font-size: 0;
  }
  .table-expand label {
    width: 130px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

